<template>
  <div class="shopcart">
    <div class="shopcart-content">
      <div class="content-left" @click="toggleList">
        <span class="shopcart-logo">
            <div class="num" v-show="totalCount>0">{{totalCount}}</div>
        </span>
        <span class="desc" v-show="totalCount>0">总计：</span><span class="price"
                                                                 v-show="totalCount>0">¥{{totalPrice/100}}</span>
      </div>
      <div class="content-right" @click="placeAnOrder" :class="{'can-next':canNext}">选好了</div>
    </div>
    <div class="shopcart-list" :class="{'fold':fold}">
      <div class="list-header">
        <span class="title">购物车</span>
        <span class="empty" @click="emptyShopCart">清空</span>
      </div>
      <div class="list-content">
        <div v-for="(item,index) in openidS" :key="index">
          <div class="everyone">
              <span class="headimgurl">
                <img width="40" height="40"
                     :src="item[2]"
                     alt="">
              </span>
            <span class="nickname">{{item[3]}}</span>
            <span class="order-count">共{{item[1]}}道菜</span>
          </div>
          <ul>
           <span v-for="(food,index) in selectFoods" :key="index" v-if="food.chooseSpecs === undefined">
             <span v-if="food.openid===item[0]">
                 <li class="food">
                     <span class="name">{{food.foodsname}}</span>
                     <span class="cartaontrol-wrapper">
                         <div class="cartcontrol">
                             <transition name="move">
                               <div class="cart-decrease" @click="decreaseCart(food)" v-show="food.count>0">
                                  <img class="inner" width="20" height="20" src="../assets/minus1.png" alt="">
                               </div>
                             </transition>
                             <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
                             <div class="cart-add" @click="addCart(food)">
                                <img width="20" height="20" src="../assets/plus1.png" alt="">
                             </div>
                         </div>
                     </span>
                     <span class="price">
                        <span v-for="(item,key,index1) in JSON.parse(food.specifications)[0]"
                              :key="index1">¥{{item/100}}</span>
                     </span>
                 </li>
             </span>
             <!--<span v-if="food.chooseSpecs===undefined">-->
             <!--<li class="food">-->
             <!--<span class="name">{{food.foodsname}}</span>-->
             <!--<span class="cartaontrol-wrapper">-->
             <!--<div class="cartcontrol">-->
             <!--<transition name="move">-->
             <!--<div class="cart-decrease" @click="decreaseCart(food)" v-show="food.count>0">-->
             <!--<img class="inner" width="20" height="20" src="../assets/minus1.png" alt="">-->
             <!--</div>-->
             <!--</transition>-->
             <!--<div class="cart-count" v-show="food.count>0">{{food.count}}</div>-->
             <!--<div class="cart-add" @click="addCart(food)">-->
             <!--<img width="20" height="20" src="../assets/plus1.png" alt="">-->
             <!--</div>-->
             <!--</div>-->
             <!--&lt;!&ndash;<CartControl :food="food"&ndash;&gt;-->
             <!--&lt;!&ndash;:all-goods="allGoods"&ndash;&gt;-->
             <!--&lt;!&ndash;:total-count="totalCount"&ndash;&gt;-->
             <!--&lt;!&ndash;@closefold="closeFold"&ndash;&gt;-->
             <!--&lt;!&ndash;&gt;</CartControl>&ndash;&gt;-->
             <!--</span>-->
             <!--<span class="price">-->
             <!--<span v-for="(item,key,index1) in JSON.parse(food.specifications)[0]" :key="index1">¥{{item}}</span>-->
             <!--</span>-->
             <!--</li>-->
             <!--</span>-->
             <!--<span v-if="food.chooseSpecs!==undefined">-->
             <!--<li class="food" v-show="item[0]>0" v-for="(item,key,index1) in food.chooseSpecs" :key="index1">-->
             <!--<span class="name">{{food.foodsname}}<span style="color:#f76763;">({{item[1]}})</span></span>-->
             <!--<span class="cartaontrol-wrapper">-->
             <!--<div class="cartcontrol">-->
             <!--<transition name="move">-->
             <!--<div class="cart-decrease" @click="decreaseCart1(food,key)">-->
             <!--<img class="inner" width="20" height="20" src="../assets/minus1.png" alt="">-->
             <!--</div>-->
             <!--</transition>-->
             <!--<div class="cart-count">{{item[0]}}</div>-->
             <!--<div class="cart-add" @click="addCart1(food,key)">-->
             <!--<img width="20" height="20" src="../assets/plus1.png" alt="">-->
             <!--</div>-->
             <!--</div>-->
             <!--</span>-->
             <!--<span class="price">-->
             <!--<span>¥{{item[2]}}</span>-->
             <!--</span>-->
             <!--</li>-->
             <!--</span>-->
          </span>
          <span v-for="(food,index) in selectFoods" :key="index" v-if="food.chooseSpecs !== undefined">
               <li class="food" v-if="item3[5]===item[0]" v-for="(item3,key,index3) in food.chooseSpecs" :key="index3">
                   <span class="name">{{food.foodsname}}<span style="color:#f76763;">({{item3[1]}})</span></span>
                   <span class="cartaontrol-wrapper">
                       <div class="cartcontrol">
                           <transition name="move">
                               <div class="cart-decrease" @click="decreaseCart1(food,key)">
                                  <img class="inner" width="20" height="20" src="../assets/minus1.png" alt="">
                               </div>
                           </transition>
                           <div class="cart-count">{{item3[0]}}</div>
                           <div class="cart-add" @click="addCart1(food,key)">
                              <img width="20" height="20" src="../assets/plus1.png" alt="">
                           </div>
                       </div>
                   </span>
                   <span class="price">
                      <span>¥{{item3[2]/100}}</span>
                   </span>
               </li>
           </span>
          </ul>
        </div>
      </div>
    </div>
    <div class="list-mask" @click="clickMask" v-show="mask"></div>
    <div class="prompt-wrapper" v-show="isPrompt">
      <div class="prompt">
        <div class="prompt-content">{{promptContent}}</div>
        <div class="prompt-choose">
          <span class="pass" @click="clickPass">取消</span>
          <span class="ok" @click="clickOk">确定</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import CartControl from './CartControl'

  export default {
    name: 'shop-cart',
    components: {
      CartControl
    },
    props: {
      selectFoods: {
        type: Array,
        default() {
          return [
            {
              price: 2,
              count: 2
            }
          ]
        }
      },
      allGoods: {
        type: Array
      }
    },
    data() {
      return {
        fold: false,
        mask: false,
        isPrompt: false,
        promptContent: ''
      }
    },
    computed: {
      totalPrice() {
        let total = 0;
        this.selectFoods.forEach((food) => {
          if (food.chooseSpecs !== undefined) {
            for (let i = 0; i < food.chooseSpecs.length; i++) {
              total += food.chooseSpecs[i][0] * food.chooseSpecs[i][2];
            }
          } else {
            for (let k in JSON.parse(food.specifications)[0]) {
              let thisGoodPrice = JSON.parse(food.specifications)[0][k];
              total += thisGoodPrice * food.count;
            }
          }
        });
        return total;
      },
      // totalPrice() {
      //   let total = 0;
      //   this.selectFoods.forEach((food) => {
      //     for (let k in JSON.parse(food.specifications)[0]) {
      //       let thisGoodPrice = JSON.parse(food.specifications)[0][k];
      //       total += thisGoodPrice * 100 * food.count;
      //     }
      //   });
      //   return total;
      // },
      totalCount() {
        let count = 0;
        this.selectFoods.forEach((food) => {
          count += food.count;
        });
        return count;
      },
      // 显示头像
      headImgUrl() {
        let headimgurl = localStorage.getItem('headimgurl');
        return headimgurl;
      },
      // 显示昵称
      nickName() {
        let nickname = localStorage.getItem('nickname');
        return nickname;
      },
      // 可以点击下一步
      canNext() {
        let can = false;
        if (this.totalCount) {
          can = true;
        }
        return can;
      },
      openidS() {
        let openids = [];
        this.selectFoods.forEach((good) => {
          if (!good.chooseSpecs) {
            openids.push([good.openid, good.count, good.headimgurl, good.nickname]);
          } else {
            good.chooseSpecs.forEach((spec) => {
              openids.push([spec[5], spec[0], spec[4], spec[3]]);
            })
          }
        });
        let lastOpenids = [];
        openids.forEach((openid) => {
          if (lastOpenids.indexOf(openid[0]) === -1) {
            lastOpenids.push(openid[0]);
          }
        });
        let openidarr = [];
        lastOpenids.forEach((val) => {
          let i = 0;
          let i2 = '';
          let i3 = '';
          openids.forEach((val2) => {
            if (val2[0] === val) {
              i = i + val2[1];
              i2 = val2[2];
              i3 = val2[3];
            }
          });
          // openid count headimgurl nickname
          openidarr.push([val, i, i2, i3]);
        });
        return openidarr;
      }
    },
    methods: {
      test() {
        console.log(this.openidS);
      },
      // 增加（没规格）
      addCart(food) {
        if (!food.count) {
          Vue.set(food, 'count', 1);
        } else {
          food.count++;
        }
        localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
        this.$emit('refreshselectfoods', ''); // 刷新购物车
      },
      // 减少（没规格）
      decreaseCart(food) {
        if (food.count) {
          food.count--;
        }
        localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
        if (this.totalCount === 0) {
          this.fold = false;
          this.mask = false;
        }
        this.$emit('refreshselectfoods', ''); // 刷新购物车
      },
      // 增加（有规格）
      addCart1(food, key) {
        food.count++;
        food.chooseSpecs[key][0]++;
        localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
        this.$emit('refreshselectfoods', ''); // 刷新购物车
      },
      // 减少（有规格）
      decreaseCart1(food, key) {
        if (food.count) {
          food.count--;
          if (food.chooseSpecs[key][0] === 1) {
            food.chooseSpecs.splice(key, 1);
          } else {
            food.chooseSpecs[key][0]--;
          }
        }
        localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
        if (this.totalCount === 0) {
          this.fold = false;
          this.mask = false;
        }
        this.$emit('refreshselectfoods', ''); // 刷新购物车
      },
      // 隐藏面具-黑色背景
      clickMask() {
        this.mask = false;
        this.fold = false;
      },
      // 显示购物车
      showShopCart(bool) {
        this.mask = true;
        this.fold = true;
      },
      // 显示和隐藏已点菜品
      toggleList() {
        if (this.totalCount) {
          this.mask = !this.mask;
          this.fold = !this.fold;
        }
      },
      // 子组件传值过来关闭显示
      // closeFold(bool) {
      //   this.fold = false;
      //   this.mask = false;
      // },
      // 取消清空购物车
      clickPass() {
        this.promptContent = '';
        this.isPrompt = false;
      },
      // 提示是否清空购物车
      emptyShopCart() {
        this.promptContent = '您确认要清空购物车吗';
        this.isPrompt = true;
      },
      // 清空购物车
      clickOk() {
        this.selectFoods.forEach((food) => {
          food.count = 0;
          food.chooseSpecs = undefined;
          food.nickname = null;
          food.headimgurl = null;
          food.openid = null;
        });
        localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
        this.fold = false;// 隐藏购物车
        this.isPrompt = false;// 隐藏提示框
        this.mask = false;// 赢藏黑色背景
        this.$emit('refreshselectfoods', ''); // 刷新购物车
      },
      // 点击选好了跳转到订单页
      placeAnOrder() {
        if (!this.totalCount) {
          return;
        }
        this.$router.push('/orderbefore');
      }
    },
    created() {
    }
  }
</script>

<style scoped lang="scss">
  .shopcart {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 50;
    height: 48px;
    border-top: 1px solid #efefef;
    .shopcart-content {
      display: flex;
      font-size: 0;
      background: #fff;
      .content-left {
        flex: 1;
        line-height: 48px;
        .shopcart-logo {
          display: inline-block;
          vertical-align: top;
          margin: 0 20px;
          width: 60px;
          height: 48px;
          background: url('../assets/pin.png') no-repeat;
          -webkit-background-size: 60px;
          background-size: 60px;
          background-position: 0 -13px;
          .num {
            position: relative;
            top: -5px;
            right: -35px;
            width: 24px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            border-radius: 16px;
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            background: #f76763;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
          }
        }
        .desc {
          font-size: 18px;
          color: #333;
        }
        .price {
          font-size: 20px;
          color: #f76763;
          font-weight: 700
        }
      }
      .content-right {
        flex: 0 0 105px;
        width: 105px;
        background: #ccc;
        color: #fff;
        font-size: 18px;
        text-align: center;
        line-height: 48px;
        &.can-next {
          background: #f76763;
        }
      }
    }
    .shopcart-list {
      position: fixed;
      bottom: -400px;
      left: 0;
      z-index: -1;
      width: 100%;
      padding-bottom: 10px;
      background-color: #fff;
      transition: bottom 0.7s;
      -moz-transition: bottom 0.7s;
      -webkit-transition: bottom 0.7s;
      &.fold {
        bottom: 48px !important;
      }
      .list-header {
        height: 60px;
        line-height: 60px;
        padding: 0 16px;
        color: #333;
        font-size: 18px;
        background: #f2f2f2;
        .empty {
          display: inline-block;
          float: right;
        }
      }
      .list-content {
        max-height: 340px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /*overflow: auto;*/
        .everyone {
          height: 60px;
          line-height: 60px;
          padding: 0 16px;
          border-bottom: 1px solid #e2e2e2;
          .headimgurl {
            display: inline-block;
          }
          .nickname {
            display: inline-block;
            font-size: 18px;
            color: #333;
          }
          .order-count {
            display: inline-block;
            font-size: 18px;
            color: #333;
            float: right;
          }
        }
        .food {
          margin: 0 16px;
          height: 60px;
          line-height: 60px;
          border-bottom: 1px dashed #dcdcdc;
          .name {
            display: inline-block;
            color: #666;
            font-size: 18px;
            max-width: 50%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .price {
            display: inline-block;
            float: right;
            color: #666;
            font-size: 18px;
            margin-right: 30px;
          }
          .cartaontrol-wrapper {
            display: inline-block;
            float: right;
            line-height: 60px;
            .cartcontrol {
              font-size: 0;
              .cart-decrease {
                vertical-align: top;
                display: inline-block;
                padding: 0 6px;
                transition: all 0.4s linear;
                &.move-enter-to {
                  opacity: 1;
                  transform: translate3D(0, 0, 0);
                }
                .inner {
                  transition: all 0.4s linear;
                  transform: rotate(0);
                }
                &.move-enter, &.move-leave-to {
                  opacity: 0;
                  transform: translate3D(24px, 0, 0);
                  .inner {
                    transform: rotate(180deg);
                  }
                }
              }
              .cart-count {
                vertical-align: middle;
                display: inline-block;
                width: 24px;
                text-align: center;
                line-height: 20px;
                font-size: 16px;
                color: #333;
              }
              .cart-add {
                vertical-align: top;
                display: inline-block;
                padding: 0 6px;
              }
            }
          }
        }
      }
    }
    .list-mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      /*opacity: 0.9;*/
      background: rgba(76, 76, 76, 0.9);
    }
    .prompt-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 60;
      background: rgba(76, 76, 76, 0.9);
      .prompt {
        position: absolute;
        top: 30%;
        left: 50%;
        width: 70%;
        height: 150px;
        border-radius: 20px;
        background: #fff;
        margin-left: -35%;
        overflow: hidden;
        .prompt-content {
          width: 100%;
          height: 100px;
          border-bottom: 1px solid #e2e2e2;
          text-align: center;
          line-height: 100px;
          font-size: 18px;
          color: #333;
        }
        .prompt-choose {
          width: 100%;
          color: #f76763;
          line-height: 50px;
          font-size: 0;
          .pass {
            display: inline-block;
            height: 50px;
            width: 50%;
            font-size: 18px;
            text-align: center;
            border-right: 1px solid #e2e2e2;
          }
          .ok {
            display: inline-block;
            height: 50px;
            width: calc(50% - 1px);
            font-size: 18px;
            text-align: center;
          }
        }
      }
    }
  }
</style>
